<template>
    <div>
        <span class="title1">系统权限

        </span>
        <el-button class="d1" type="primary" @click="openBatchDialog">添加权限</el-button>
<!--        <el-dialog
                :close-on-click-modal=false
                :visible.sync="dialogVisible"
                title="添加权限"
                width="30%">
            <el-form ref="ruleForm" :model="editUser" :rules="rules">
                <el-form-item prop="sn">
                    <el-input v-model="editUser.sn"
                              placeholder="请输入工号/学号"
                              style="width: 90%;margin-left: 50px"></el-input>
                </el-form-item>
                <el-form-item label="选择角色："
                              label-width="150px"
                              placeholder="请选择角色">
                    <el-select v-model="editUser.roleId" placeholder="选择角色" style="width: 100%;">
                        <el-option
                                v-for="item in roles2"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择本系统权限"
                              label-width="150px"
                              placeholder="请选择本系统权限">
                    <el-select v-model="editUser.roleId" placeholder="选择本系统权限" style="width: 100%">
                        <el-option
                                v-for="item in roles2"
                                :key="item.value"
                                :label="modifiedLabel(item)"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer" style="display: flex; justify-content: center;">
            <el-button size="medium"
                       style="background: #166AFF;color: #FFFFFF; text-align: center;"
                       @click="submit">确 认 提 交</el-button>
        </span>
        </el-dialog>-->
        <el-card style="margin-left: 15px;margin-right: 15px">
            <div class="card"></div>
            <el-row :gutter="10">
                <el-col :span="4">
                </el-col>
                <el-col :span="4">
                </el-col>
            </el-row>
            <el-table
                    :data="users"
                    stripe
                    style="width: 100%">
                <el-table-column
                        label="姓名"
                        prop="name">
                    <template slot-scope="scope">
                        <span class="teanName1">{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="工号"
                        prop="num">
                    <template slot-scope="scope">
                        <span class="teanName1">{{ scope.row.sn }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="访问角色"
                        prop="role">
                    <template slot-scope="scope">
                        {{ formatRole(scope.row.roleId) }}
                    </template>
                </el-table-column>
                <el-table-column
                        label="系统权限"
                        prop="system">
                    <template slot-scope="scope">
                        {{ formatRole1(scope.row.roleId) }}
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        prop="do">
                    <template slot-scope="scope">
                        <el-button
                                size="16px"
                                type="text"
                                @click="handleEdit(scope.row)">编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    :current-page="query.pageNo"
                    :page-size="query.pageSize"
                    :page-sizes="[10, 20, 40, 100]"
                    :total="total"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    style="margin-top: 20px"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
            </el-pagination>
        </el-card>
        <NinthEditDialog ref="userEdit" @ok="getUserList"/>
        <NinthAddPermissions ref="userEdit1" @ok="getUserList"/>
    </div>
</template>
<script src="//unpkg.com/vue@2/dist/vue.js">

</script>
<script src="//unpkg.com/element-ui@2.15.14/lib/index.js"></script>
<script>
import {userList} from '../../../../api/ninth'
import {editUser} from '../../../../api/ninth'
import {addUser} from '../../../../api/ninth'
import NinthEditDialog from '../../components/ninth/NinthEditDialog.vue'
import NinthAddPermissions from '../../components/ninth/NinthAddPermissions.vue'

export default {
  name: 'ninth',
  components: {NinthAddPermissions, NinthEditDialog},
  data: function () {
    return {
      roles: [{
        value: 1,
        label: '主管理员'
      }, {
        value: 2,
        label: '学工部科长'
      }, {
        value: 3,
        label: '研工部科长'
      }, {
        value: 4,
        label: '辅导员'
      }],
      /*  roles2: [{
           value: 1,
           label: '房源基建；房源分配；本科生房源；研究生房源'
       }, {
           value: 2,
           label: '本科生房源'
       }, {
           value: 3,
           label: '研究生房源'
       }, {
           value: 4,
           label: '无权限访问'
       }], */
      roles2: [],
      total: 0,
      users: [],
      editUser: {},
      rules: [],
      tableData: [],
      ruleForm: {
        roomId: '',
        floor: '',
        buildingId: '',
        prefix: '',
        digit: '',
        roomNumber: '',
        bedNumber: '',
        price: ''
      },
      // value: false
      dialogVisible: false,
      dialogVisibleCatch: false,
      shouldShow: false,
      input: '',
      query: {
        name: '',
        sn: '',
        roleId: ''
      },
    }
  },
  methods: {
    modifiedLabel (item) {
      switch (item.label) {
        case '主管理员':
          return '房源基建；房源分配；本科生房源；研究生房源'
        case '学工部科长':
          return '本科生房源'
        case '研工部科长':
          return '研究生房源'
        case '辅导员':
          return '无权限访问'
        default:
          return '无权限访问'
      }
    },
    show (forth, roles) {
      this.ruleForm = JSON.parse(JSON.stringify(forth))
      this.roles = roles
      this.dialogVisibleBatch = true
    },
    submit () {
      this.$refs.ruleForm.validate(flag => {
        if (flag) {
          editUser(this.ruleForm).then(res => {
            if (res.data === true) {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.dialogVisibleBatch = false
              this.getUserList()
            }
          })
        }
      })
    },
    submit1 () {
      this.$refs.ruleForm.validate(flag => {
        if (flag) {
          addUser(this.ruleForm).then(res => {
            if (res.data === true) {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.dialogVisible = false
              this.$emit('ok')
            }
          })
        }
      })
    },
    openBatchDialog (row) {
      // 打开弹窗
        this.$refs.userEdit1.show(row, this.roles)
      this.dialogVisible = true
    },
    getUserList () {
      userList(this.query).then(res => {
        this.users = res.data.records
        this.total = res.data.total
      })
    },
    handleSizeChange (value) {
      // 把页面大小重复赋值，然后重新获取数据
      this.query.pageSize = value
      this.getUserList()
    },
    handleCurrentChange (value) {
      this.query.pageNo = value
      this.getUserList()
    },
    handleEdit (row) {
      this.$refs.userEdit.show(row, this.roles)
      // 从当前组件获取所有有名字的组件然后获取userEdit,在调用它的方法
    },
    handleClose () {
      // 这里可以添加关闭前的逻辑，比如确认是否真的要关闭
      this.dialogVisible = false
    },
    submitPermissions () {
      // 提交权限的逻辑，比如发送到后端
      console.log('提交的权限:', this.selectedPermissions)
      // 提交后可能需要关闭弹窗
      this.dialogVisible = false
    },
    handleChange (newValue) {
      // newValue 是开关状态变化后的值
      console.log('开关状态变为：', newValue)
      // 可以在这里执行其他逻辑，例如发送请求或者更新其他状态
    },
    handleCloseBatch (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {
        })
    },
    handleCloseCatch (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {
        })
    },
    handleCloseAdd (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {
        })
    },
    formatRole (roleId) {
      switch (Number(roleId)) {
        case 1:
          return '主管理员'
        case 2:
          return '学工部科长'
        case 3:
          return '研工部科长'
        case 4:
          return '辅导员'
        default:
          return '未知'
      }
    },
    formatRole1 (roleId) {
      switch (Number(roleId)) {
        case 1:
          return '房源基建；房源分配；本科生房源；研究生房源'
        case 2:
          return '本科生房源'
        case 3:
          return '研究生房源'
        case 4:
          return '无权限访问'
        default:
          return '无权限访问'
      }
    }
  },
  created () {
    this.getUserList()
  }
}
</script>

<style scoped>
@import "../../../../assets/styles/total/ninth.css";

.form-container {
    display: flex;
    flex-direction: column; /* 垂直布局 */
    align-items: flex-start; /* 文本和输入框都左对齐 */
}

.form-item {
    margin-bottom: 20px; /* 增加垂直间距 */
    /* 如果需要，可以在这里添加更多的样式来调整布局 */
    width: calc(100% + 0px);
}

/* 如果想要输入框看起来像是右侧对齐（实际上是通过增加左侧空间），可以这样做： */
.form-item > el-select,
.form-item > .input-with-select {
    margin-left: auto; /* 这会将输入框推向右侧，但请注意这不会改变文本的对齐方式 */
    /* 如果需要，可以添加一些左侧填充来保持文本和输入框之间的空间 */
}
</style>
